import { useTranslations } from 'next-intl';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Zap,
  Shield,
  Globe,
  Cpu,
  Cloud,
  Database,
  ArrowRight,
  CheckCircle,
  Star,
} from 'lucide-react';

export default function ProductsPage() {
  const t = useTranslations('common');

  const products = [
    {
      id: 1,
      name: 'Enterprise UI Kit',
      description: '企业级前端组件库，包含100+精美组件',
      price: '¥2,999',
      category: '前端开发',
      features: ['100+ 组件', '响应式设计', '暗色模式', '国际化支持'],
      icon: Zap,
      color: 'bg-blue-500',
      popular: true,
    },
    {
      id: 2,
      name: 'Cloud Platform',
      description: '企业级云平台解决方案',
      price: '¥9,999',
      category: '云服务',
      features: ['弹性扩展', '数据备份', '24/7监控', 'API网关'],
      icon: Cloud,
      color: 'bg-green-500',
      popular: false,
    },
    {
      id: 3,
      name: 'Security Suite',
      description: '全方位企业安全防护解决方案',
      price: '¥15,999',
      category: '网络安全',
      features: ['威胁检测', '数据加密', '访问控制', '审计日志'],
      icon: Shield,
      color: 'bg-red-500',
      popular: false,
    },
    {
      id: 4,
      name: 'Analytics Pro',
      description: '智能数据分析和商业洞察平台',
      price: '¥6,999',
      category: '数据分析',
      features: ['实时分析', '自定义报表', '预测模型', '数据可视化'],
      icon: Database,
      color: 'bg-purple-500',
      popular: true,
    },
    {
      id: 5,
      name: 'Global CDN',
      description: '全球内容分发网络服务',
      price: '¥3,999',
      category: '网络服务',
      features: ['全球节点', '智能路由', '缓存优化', '实时监控'],
      icon: Globe,
      color: 'bg-orange-500',
      popular: false,
    },
    {
      id: 6,
      name: 'AI Engine',
      description: '人工智能引擎和机器学习平台',
      price: '¥12,999',
      category: '人工智能',
      features: ['深度学习', '自然语言处理', '计算机视觉', 'AutoML'],
      icon: Cpu,
      color: 'bg-indigo-500',
      popular: true,
    },
  ];

  const categories = [
    '全部',
    '前端开发',
    '云服务',
    '网络安全',
    '数据分析',
    '网络服务',
    '人工智能',
  ];

  return (
    <div className="space-y-12 px-4 py-8">
      {/* Page Header */}
      <section className="mx-auto max-w-4xl text-center">
        <h1 className="mb-6 text-4xl font-bold md:text-5xl">
          {t('products')}与服务
        </h1>
        <p className="text-muted-foreground mb-8 text-xl">
          为现代企业提供全面的技术解决方案，助力数字化转型
        </p>

        {/* Category Filter */}
        <div className="mb-8 flex flex-wrap justify-center gap-2">
          {categories.map((category, index) => (
            <Button
              key={index}
              variant={index === 0 ? 'default' : 'outline'}
              size="sm"
              className="min-w-fit"
            >
              {category}
            </Button>
          ))}
        </div>
      </section>

      {/* Products Grid */}
      <section className="mx-auto max-w-7xl">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {products.map(product => {
            const Icon = product.icon;
            return (
              <Card
                key={product.id}
                className="relative transition-shadow duration-300 hover:shadow-lg"
              >
                {product.popular && (
                  <div className="absolute -top-3 left-4 z-10">
                    <Badge className="bg-yellow-500 text-white">
                      <Star className="mr-1 h-3 w-3" />
                      热门
                    </Badge>
                  </div>
                )}

                <CardHeader>
                  <div className="mb-4 flex items-center justify-between">
                    <div
                      className={`h-12 w-12 rounded-lg ${product.color} flex items-center justify-center`}
                    >
                      <Icon className="h-6 w-6 text-white" />
                    </div>
                    <Badge variant="outline">{product.category}</Badge>
                  </div>

                  <CardTitle className="mb-2 text-xl">{product.name}</CardTitle>
                  <p className="text-muted-foreground">{product.description}</p>
                </CardHeader>

                <CardContent>
                  <div className="space-y-4">
                    {/* Features */}
                    <div className="space-y-2">
                      {product.features.map((feature, index) => (
                        <div key={index} className="flex items-center gap-2">
                          <CheckCircle className="h-4 w-4 text-green-600" />
                          <span className="text-sm">{feature}</span>
                        </div>
                      ))}
                    </div>

                    {/* Price */}
                    <div className="border-t pt-4">
                      <div className="mb-4 flex items-center justify-between">
                        <div>
                          <span className="text-2xl font-bold">
                            {product.price}
                          </span>
                          <span className="text-muted-foreground">/年</span>
                        </div>
                      </div>

                      <div className="space-y-2">
                        <Button className="w-full">
                          立即购买
                          <ArrowRight className="ml-2 h-4 w-4" />
                        </Button>
                        <Button variant="outline" className="w-full">
                          免费试用
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </section>

      {/* Enterprise Solutions */}
      <section className="bg-muted/30 mx-auto max-w-6xl rounded-lg p-12">
        <div className="mb-12 text-center">
          <h2 className="mb-4 text-3xl font-bold">企业定制解决方案</h2>
          <p className="text-muted-foreground text-xl">
            为大型企业提供量身定制的技术解决方案
          </p>
        </div>

        <div className="mb-8 grid gap-8 md:grid-cols-3">
          <div className="text-center">
            <div className="bg-primary/10 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full">
              <Zap className="text-primary h-8 w-8" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">快速部署</h3>
            <p className="text-muted-foreground">
              专业团队支持，快速完成项目部署
            </p>
          </div>

          <div className="text-center">
            <div className="bg-primary/10 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full">
              <Shield className="text-primary h-8 w-8" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">安全可靠</h3>
            <p className="text-muted-foreground">
              企业级安全保障，数据安全无忧
            </p>
          </div>

          <div className="text-center">
            <div className="bg-primary/10 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full">
              <Globe className="text-primary h-8 w-8" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">全球服务</h3>
            <p className="text-muted-foreground">
              覆盖全球的服务网络，本地化支持
            </p>
          </div>
        </div>

        <div className="text-center">
          <Button size="lg" className="px-8 text-lg">
            {t('contact')}销售团队
            <ArrowRight className="ml-2 h-5 w-5" />
          </Button>
        </div>
      </section>

      {/* Testimonials */}
      <section className="mx-auto max-w-6xl">
        <h2 className="mb-12 text-center text-3xl font-bold">客户评价</h2>

        <div className="grid gap-8 md:grid-cols-3">
          {[
            {
              name: '张总',
              company: '科技有限公司',
              content:
                '使用了企业级前端模板后，我们的开发效率提升了300%，产品质量也有了明显改善。',
            },
            {
              name: '李经理',
              company: '创新科技集团',
              content:
                '云平台解决方案帮助我们实现了数字化转型，成本降低了40%，效率大幅提升。',
            },
            {
              name: '王主管',
              company: '智能制造企业',
              content:
                '安全套件为我们的业务提供了全方位保护，让我们可以专注于核心业务发展。',
            },
          ].map((testimonial, index) => (
            <Card key={index} className="p-6">
              <CardContent>
                <div className="mb-4 flex items-start gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star
                      key={i}
                      className="h-4 w-4 fill-yellow-400 text-yellow-400"
                    />
                  ))}
                </div>
                <p className="text-muted-foreground mb-4">
                  &ldquo;{testimonial.content}&rdquo;
                </p>
                <div>
                  <p className="font-semibold">{testimonial.name}</p>
                  <p className="text-muted-foreground text-sm">
                    {testimonial.company}
                  </p>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>
    </div>
  );
}
